import { List } from "antd";
import { useSelector } from "react-redux";
import { useEffect } from "react";
import { useGetTopics } from "../server/getData";
import { useLocation } from "react-router";
import qs from "qs";

export default () => {
    let { data, loading } = useSelector((state) => state.topics);
    const { search } = useLocation();
    const { tab = "all", page = "1" } = qs.parse(search.substr(1));
    const getTopics = useGetTopics();

    useEffect(() => {
        getTopics(page, tab);
    }, [tab, page]);
    return (
        <List
            dataSource={data}
            loading={loading}
            renderItem={(itemdata) => {
                return (
                    <List.Item className="list-item">
                        {itemdata.title}
                    </List.Item>
                );
            }}
        />
    );
};
